<!-- 关于 -->
<template>
	<div>
		<HEADER></HEADER>
		<div class="container">
			<div class="columns">
				<div class="mine-columns">
					<div class="card pageHead"><h1>关于</h1></div>

					<div class="card pageHead">
						<h1>联系站长</h1>
						<div class="myinfoForm">
							<div class="friendForm">
								<el-form ref="friendForm" :model="friendForm" label-width="100px" :rules="rules">

									<el-form-item label="标题" prop="name">
										<el-input v-model="friendForm.name" placeholder="标题" maxlength="30"
											show-word-limit></el-input>
									</el-form-item>
									<el-form-item label="反馈描述" prop="desc">
										<el-input type="textarea" v-model="friendForm.desc" placeholder="请描述您的问题" maxlength="1000"
											show-word-limit></el-input>
									</el-form-item>
									<el-form-item label="您的邮箱" prop="email">
										<el-input v-model="friendForm.email" placeholder="请输入您的邮箱便于联系" show-word-limit>
										</el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="submitForm('friendForm')">立即提交</el-button>
										<el-button @click="resetForm('friendForm')">取消</el-button>
									</el-form-item>
									
								</el-form>
							</div>
						</div>
					</div>

					<div class="card pageHead" v-if="SendEmailArr.length!==0">
						<h1>问题列表</h1>
						<div class="sendMail">
							<div class="item" v-for="(item,index) in SendEmailArr" :key="index">
								<div class="head">
									<div class="name">{{item.nameS}}</div>
									<div class="cont">
										<div class="min">{{item.emailS}}</div>
										<div class="min">{{item.datetimeS}}</div>
									</div>									
								</div>
								<div class="desc">{{item.descS}}</div>
							</div>
						</div>
					</div>
					
					<div class="card">
						<div class="myinfo">
							本网站由肥菇凉开发！更多功能，敬请期待！
						</div>
					</div>
				</div>
				<LeftView @buttClassfy="buttClassfy" @buttLable="buttLable"></LeftView>
				<RighthView @buttArticle="buttArticle" @buttArchive="buttArchive"></RighthView>
			</div>
		</div>
		<Gotop></Gotop><FOOTER></FOOTER>
	</div>
</template>

<script>
	import HEADER from '../components/header.vue'
	import FOOTER from '../components/footer.vue'
	import LeftView from '../components/leftView.vue'
	import RighthView from '../components/righthView.vue'
	import Gotop from '../components/gotop.vue'
	import util from '../utils/util.js'
	export default {
		name: 'About',
		data() {
			var logEmail = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('邮箱不能为空'));
				}
				setTimeout(() => {
					var emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
					if (!emailReg.test(value)) {
						callback(new Error('请注意邮箱格式'));
					} else {
						callback();
					}
				}, 500);
			};
			return {
				SendEmailArr:[],
				friendForm: {
					email: '',
					name: '',
					desc: ''
				},
				rules: {
					email: {validator: logEmail},
					name: {required: true,message: '请输入博客名称',trigger: 'blur'},
				}
			
			}
		},
		mounted() {
			this.getSendEmailArr();
		},
		methods: {
			getSendEmailArr(){
				this.$axios.post(this.HOST + '/api/getSendEmailArr').then(res => {
					if(res.data.err==200){
						for(let i=0;i<res.data.data.length;i++){
							res.data.data[i].datetimeS = util.timeChange(res.data.data[i].datetimeS)
						}
						this.SendEmailArr = res.data.data;
					}
				})
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						var datetime = util.timeConversionNow(new Date());
						this.$axios.post(this.HOST + '/api/sendEmail', {
							email: this.friendForm.email,
							name: this.friendForm.name,
							desc: this.friendForm.desc,
							date: datetime
						}).then(res => {
							if(res.data.err==200){
								this.$refs[formName].resetFields();
								this.$notify({
									title: res.data.msg,
									type: 'success'
								})
								this.getSendEmailArr();
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			// 分类
			buttClassfy(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 标签
			buttLable(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
			// 最近文章
			buttArticle(e){
				this.$router.push({
					path:'/Article',
					query:{ArtID:e.ArtID},
				})
			},
			// 归档
			buttArchive(e){
				this.$router.push({
					path:'/ArrayItem',
					query:{arr:e}
				})
			},
		},
		components: {
			HEADER: HEADER,
			FOOTER: FOOTER,
			LeftView: LeftView,
			RighthView: RighthView,
			Gotop: Gotop
		},
	}
</script>

<style>
	.myinfoForm{padding:0 3.6em 2em 2em;}
	.sendMail{padding:0 2em 2em 2em;}
	.sendMail .item{margin-bottom: 1em;}
	.sendMail .item .head{margin-bottom:0.1em;}
	.sendMail .item .head .name{color:#607281;font-size:20px;font-weight:600;}
	.sendMail .item .head .cont{display:flex;align-items:center;justify-content:space-between;}
	.sendMail .item .head .cont .min{font-size:12px;line-height:2;color:#a3b2bf;}
	.sendMail .item .desc{color:#7c90a3;}
	textarea.el-textarea__inner{min-height:180px !important;}
</style>
